<template>
  <div>
    <div class="operation">安全U盘</div>
    <div class="wrap">
      <div class="tip" v-if="data.insert">安全U盘已插入</div>
      <div class="tip" v-else>未检测到安全U盘设备</div>
      <div class="content">
        <div class="device">
          <img :src="imgObj" width="200" height="200" />
        </div>
        <el-switch
          v-model="data.mode"
          @change="setMode(data.mode)"
          active-text="加密区域"
          :active-value="1"
          :inactive-value="0"
          inactive-text="普通区域"
          :disabled="!data.insert"
        >
        </el-switch>
        <div class="ordinary">
          <div class="scanTypeSty" v-if="data.readStatus">
            <div class="margin1">
              <el-radio v-model="data.read" :value="1">可读可写</el-radio>
              <el-radio v-if="false" v-model="data.read" :value="0">可读可写</el-radio>
            </div>
          </div>
          <div class="scanTypeSty" v-if="data.writeStatus">
            <div class="margin2">
              <el-radio v-model="data.write" :value="1">只读模式</el-radio>
              <el-radio v-model="data.write" v-if="false" :value="0">只读模式 </el-radio>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import imgObj from "~/assets/images/target.png";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { req_getUdisk } from "~/utils/axios/index.js";
import { useTreeStore } from "~/utils/pinia/tree.js";
const treeStore = useTreeStore();
const data = reactive({
  insert: false,
  mode: false,
  readStatus: false,
  writeStatus: false,
  read: true,
  write: true,
});
onMounted(() => {
  getUdisk();
});
const setMode = (mode) => {};
const getUdisk = () => {
  if (!treeStore.treeDeviceId) return;
  req_getUdisk(treeStore.treeDeviceId).then((res) => {
    if (res.data.status) {
      if (res.data.insert) {
        data.insert = true;
      } else {
        return false;
      }
      // 普通
      if (res.data.mode === 0) {
        data.readStatus = true;
        data.writeStatus = false;
        data.mode = 0;
        data.read = 1;
        data.write = 1;
      } else {
        data.mode = 1;
        if (res.data.write === 0) {
          // 只读
          data.readStatus = false;
          data.writeStatus = true;

          data.read = 0;
          data.write = 1;
        } else {
          data.readStatus = true;
          data.writeStatus = false;
          data.read = 1;
          data.write = 0;
        }
      }
    } else {
      ElMessage.error("安全U盘未检测到");
    }
  });
};
</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 18px;
}
.wrap,
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
